<template>
    <div>
        <el-form :model="model"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="订单编号" prop="Number">
                        <el-input v-model="model.Number" placeholder="请输入订单编号" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="备注" prop="Remark">
                        <el-input v-model="model.Remark" placeholder="备注信息" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="收款账户" prop="PaymentAccount">
                        <el-input v-model="model.PaymentAccount" placeholder="收款账户" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="出库日期" prop="DeliveryDate">
                        <el-input v-model="model.DeliveryDate" placeholder="出库日期" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>


                <el-col :span="8">
                    <el-form-item label="关联订单" prop="OrderSalesId">
                        <el-input v-model="model.OrderSalesId" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="总数量" prop="Count">
                        <el-input v-model="model.Count" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="客户" prop="CustomerNumber">
                        <el-input v-model="model.CustomerName" placeholder="客户" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="联系人" prop="CustomerContact">
                        <el-input v-model="model.CustomerContact" placeholder="请输入客户联系人" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="联系电话" prop="CustomerContactTel">
                        <el-input v-model="model.CustomerContactTel" placeholder="请输入客户联系人电话" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="交货地址" prop="DeliveryLocation">
                        <el-input v-model="model.DeliveryLocation" placeholder="请输入交货地址" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="收款方式" prop="PaymentCategory">
                        <el-input v-model="model.PaymentCategory" placeholder="收款方式" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="收款日期" prop="PaymentTime">
                        <el-input v-model="model.PaymentTime" placeholder="收款日期" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="运输方式" prop="Transfer">
                        <el-input v-model="model.Transfer" placeholder="运输方式" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="出库仓" prop="WarehouseName">
                        <el-input v-model="model.WarehouseName" placeholder="出库仓" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="总价" prop="Price">
                        <el-input v-model="model.Price" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="优惠" prop="DisCount">
                        <el-input v-model="model.DisCount" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="订单状态" prop="Status">
                        <el-tag type="info" v-if="Number(model.Status) === 0">待审核</el-tag>
                        <el-tag type="success" v-else-if="Number(model.Status) === 1">已审核</el-tag>
                        <el-tag type="danger" v-else-if="Number(model.Status) === 2">已退货</el-tag>
                    </el-form-item>
                </el-col>
            </el-row>


        </el-form>

        <div style="border: 1px solid #dcdfe6; padding: 10px;">
            <h1 style="margin: 10px;">商品</h1>
            <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="360" show-summary
                :summary-method="getSummaries">
                <el-table-column type="selection" width="70"></el-table-column>
                <el-table-column prop="ItemCode" label="物料编码" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="ItemName" label="物料名称" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Spec" label="规格" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="UnitOfMeasure" label="单位" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Amount" label="金额" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="CurrCount" label="当前库存" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Count" label="数量" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Price" label="商品单价" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Rebate" label="返利" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Remark" label="备注" :show-overflow-tooltip="true"></el-table-column>
            </el-table>

        </div>

    </div>
</template>

<script>


export default {
    props: {
        model: {
            require: true,
            type: Object,

        }
    },
    data() {
        return {


            //检测项目数据
            tableData: [],

            isLoading: false,
        }
    },
    //实例生命周期
    created() {
        this.GetItem()
    },
    methods: {

        //根据生产退料Id 返回产品数据
        GetItem() {
            this.isLoading = true;
            this.$http.get('/api/OrderSalesExWarehouse/GetItem', {
                params: {
                    WarehouseId: this.model.WarehouseId,
                    OrderSalesExWarehouseId: this.model.Id
                }
            })
            .then(res => {
                this.isLoading = false;
                this.tableData = res.Data;
            })
        },
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '总价';
                    return;
                }
                if (column.property === 'Amount' || column.property === 'Price') {
                    const values = data.map(item => Number(item[column.property]));


                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;

                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] += ' 元';
                    } else {
                        sums[index] = '';
                    }
                }
                else {
                    sums[index] = '';
                }

            });
            return sums;


        }
    }

}
</script>

<style></style>